/**
 * Created by wangjz on 2018/11/27.
 */
import React, { Component } from 'react';
import { Avatar, Dropdown,  Menu, Spin, Modal } from 'antd';
import '../less/index.less';
import { inject, observer } from 'mobx-react';
import ChangePwd from '../../components/ChangePwd';
import { logout } from '../service';
import { LogoutOutlined, SettingOutlined, UnlockOutlined, UserOutlined } from '@ant-design/icons';



@inject('store')
@observer
class RightContent extends Component {
  clickMenuHandler = ({ key }) => {
    if (key == 'userCenter') {
      this.props.store.redirectUrl('./settings.html');
    } else if (key == 'password') {
      this.props.store.showChangePwdDialog();
    } else if (key == 'logout') {
      Modal.confirm({
        title: '确定退出系统吗?',
        onOk() {
          sessionStorage.clear();
          logout();
        },
      });
    }
  };

  changePwdOkHandler = () => {
    this.props.store.showChangePwdDialog(false);
  };

  render() {
    const { theme, user, store } = this.props;

    const menu = (
      <Menu onClick={this.clickMenuHandler}>
        <Menu.Item key="userCenter"><SettingOutlined/>个人设置</Menu.Item>
        <Menu.Item key="password"><UnlockOutlined/>密码修改</Menu.Item>
        <Menu.Divider/>
        <Menu.Item key="logout"><LogoutOutlined/>退出系统</Menu.Item>
      </Menu>
    );

    let themeColor = theme == 'dark' ? '#FFFFFF' : '#001528';

    return (
      <div className='right'>
        <Dropdown overlay={menu}>
            <span className={`action account`} style={{ color: themeColor }}>
              <Avatar className='avatar' icon={<UserOutlined/>}/>
              <span className='name'>{user.name}</span>
            </span>
        </Dropdown>
        <ChangePwd {...store.passwordDialog} okHandler={this.changePwdOkHandler}
                   cancelHandler={this.changePwdOkHandler}/>
      </div>
    );
  }
}

export default RightContent;
